<template>
  <div>
    <my-breadcrumb :items="['商品管理', '库存预警']"></my-breadcrumb>
    <!--<div class="item" v-for="(item, index) in goodsList" :key="index">
      <div>
        <Avatar :src="staticUrl + item.mainImagePath" shape="square" size="large"></Avatar>
        <span>{{ item.title }}</span>
      </div>
      <div>
        <Table :data="item.skus" :columns="listColumns"></Table>
      </div>
    </div>-->
    <Table :data="list" :columns="listColumns"></Table>
    <Modal v-model="showUpdate" title="修改商品库存" @on-ok="updateStock">
      <Form>
        <FormItem label="商品库存" :label-width="70">
          <InputNumber v-model="nowStock" :min="1"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'warning-stock',
  data () {
    return {
      url: {
        list: '/goods/manage/get/warning/stock/goods/list',
        update: '/goods/manage/modify/goods/sku/stock'
      },
      goodsList: [],
      skuList: [],
      list: [],
      listColumns: [
        {
          title: '程度',
          render: (h, params) => {
            return h('span', params.row.stock <= params.row.warningStock ? '严重' : '警告')
          }
        },
        {
          title: '商品',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  size: 'large',
                  shape: 'square',
                  src: this.staticUrl + params.row.mainImagePath
                }
              }),
              h('span', params.row.title)
            ])
          }
        },
        {
          title: 'sku',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  size: 'large',
                  shape: 'square',
                  src: this.staticUrl + params.row.skuImagePath
                }
              }),
              h('span', params.row.goodsSkuName)
            ])
          }
        },
        {
          title: '当前库存',
          align: 'center',
          render: (h, params) => {
            let color = params.row.stock <= params.row.warningStock ? 'error' : 'warning'
            return h('Button', {
              props: {
                type: color,
                size: 'small'
              },
              on: {
                click: () => {
                  this.toUpdateStock(params.row)
                }
              }
            }, params.row.stock)
          }
        },
        {
          title: '预警库存',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.warningStock)
          }
        }
      ],

      showUpdate: false,
      nowStock: null,
      oldStock: null,
      skuId: null
    }
  },
  methods: {
    toUpdateStock (row) {
      this.nowStock = row.stock
      this.oldStock = row.stock
      this.skuId = row.skuId
      this.showUpdate = true
    },
    updateStock () {
      if (this.nowStock !== this.oldStock) {
        this.$ajax.post(this.url.update, {skuId: this.skuId, stock: this.nowStock})
          .then(res => {
            if (res.data.success) {
              this.$Message.success('更新成功')
              this.initList()
            }
          })
      }
    },

    initList () {
      this.$ajax.get(this.url.list)
        .then(res => {
          /*
          * let temp = []
          res.data.data.forEach(item => {
            if (!temp['P' + item.goodsId]) {
              temp['P' + item.goodsId] = {}
              temp['P' + item.goodsId].skus = []
            }
            temp['P' + item.goodsId].title = item.title
            temp['P' + item.goodsId].mainImagePath = item.mainImagePath
            temp['P' + item.goodsId].skus.push({
              goodsSkuName: item.goodsSkuName,
              skuId: item.skuId,
              skuImagePath: item.skuImagePath
            })
          })
          let arr = []
          for (let i in temp) {
            // this.$set(this.list, count, temp[i])
            arr.push(temp[i])
          }
          this.$set(this, 'goodsList', arr)
          * */
          if (res.data.success) {
            this.list = res.data.data
          }
        })
    }
  },
  created () {
    this.initList()
  }
}
</script>

<style scoped>
  .item{
    margin-bottom: 16px;
    border: 1px solid #dddee1;
    padding: 10px;
  }
</style>
